<template>
  <el-image
    class="custom-pipe-image"
    :src="defaultUrl"
    :fit="props.fit"
    :preview-src-list="imgUrls"
    preview-teleported
  >
    <template #error>
      <div class="image-slot">
        <el-icon><icon-picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { formatWebUrl } from '@/utils/util';

const props = defineProps({
  // 带“英文逗号”间隔的字符串
  url: {
    type: String,
    required: true
  },

  // 显示第几张图片
  index: {
    type: Number,
    default: 0
  },

  fit: {
    type: String,
    default: 'cover'
    // default: "contain",
  }
});

// 切割路径
const imgUrls = computed(() =>
  (props.url ?? '')
    .split(',')
    .filter((item) => !!item)
    .map((item) => formatWebUrl(item))
);
const defaultUrl = computed(() => imgUrls.value[props.index]);
</script>

<style lang="scss" scoped>
.custom-pipe-image {
  width: 80px;
  height: 80px;

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }
}

.custom-pipe-image-cover {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
</style>
